import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FittedBox-填充容器',
      home: Scaffold(
        appBar: AppBar(
          title: Text('FittedBox-填充容器'),
        ),
          body: Center(
            child: Column(
              children: [
                Container(
                  width: 80.0,
                  height: 80.0,
                  child: FittedBox(
                    fit: BoxFit.fill,//全部显示可能拉伸，充满
                    //contain 全部显示，显示原比例，不充满
                    //cover 显示可能拉伸，可能裁剪，充满
                    //fit width，可能拉伸，可能裁剪，宽度充满
                    //fit height 可能拉伸，可能裁剪，高度充满
                    //fit none
                    //scale down 和 contain差不多，单属性不允许超过图片大小，可小不可大
                    alignment: Alignment.center,
                    child: Container(
                      color: Colors.green,
                      child:
                        // Image.network('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=图片&step_word=&hs=0&pn=1&spn=0&di=7084067677328637953&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=141682556%2C711660599&os=3078907722%2C1012637783&simid=141682556%2C711660599&adpicid=0&lpn=0&ln=1665&fr=&fmq=1653706929562_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242306111155-0-lp.jpg%26refer%3Dhttp%3A%2F%2Fimg.jj20.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1656298930%26t%3D7fef9964fe6748b004a6b5dd41238646&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B33da_z%26e3Bv54AzdH3F9hAzdH3Fu3AzdH3Fnm0m0c_z%26e3Bip4s&gsm=2&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDYsMSw0LDIsNSw3LDgsOQ%3D%3D')
                      Text(
                        'BoxFit.fill',
                        style: TextStyle(color:Colors.white),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: 80.0,
                  height: 80.0,
                  child: FittedBox(
                    fit: BoxFit.contain,
                    //contain 全部显示，显示原比例，不充满
                    //cover 显示可能拉伸，可能裁剪，充满
                    //fit width，可能拉伸，可能裁剪，宽度充满
                    //fit height 可能拉伸，可能裁剪，高度充满
                    alignment: Alignment.center,
                    child: Container(
                      color: Colors.green,
                      child: Text(
                        'BoxFit.fill',
                        style: TextStyle(color:Colors.white),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: 80.0,
                  height: 80.0,
                  child: FittedBox(
                    fit: BoxFit.cover,
                    //contain 全部显示，显示原比例，不充满
                    //cover 显示可能拉伸，可能裁剪，充满
                    //fit width，可能拉伸，可能裁剪，宽度充满
                    //fit height 可能拉伸，可能裁剪，高度充满
                    alignment: Alignment.center,
                    child: Container(
                      color: Colors.green,
                      child: Text(
                        'BoxFit.fill',
                        style: TextStyle(color:Colors.white),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: 80.0,
                  height: 80.0,
                  child: FittedBox(
                    fit: BoxFit.fitWidth,
                    //contain 全部显示，显示原比例，不充满
                    //cover 显示可能拉伸，可能裁剪，充满
                    //fit width，可能拉伸，可能裁剪，宽度充满
                    //fit height 可能拉伸，可能裁剪，高度充满
                    alignment: Alignment.center,
                    child: Container(
                      color: Colors.green,
                      child: Text(
                        'BoxFit.fill',
                        style: TextStyle(color:Colors.white),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: 80.0,
                  height: 80.0,
                  child: FittedBox(
                    fit: BoxFit.fitHeight,
                    //contain 全部显示，显示原比例，不充满
                    //cover 显示可能拉伸，可能裁剪，充满
                    //fit width，可能拉伸，可能裁剪，宽度充满
                    //fit height 可能拉伸，可能裁剪，高度充满
                    alignment: Alignment.center,
                    child: Container(
                      color: Colors.green,
                      child: Text(
                        'BoxFit.fill',
                        style: TextStyle(color:Colors.white),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: 80.0,
                  height: 80.0,
                  child: FittedBox(
                    fit: BoxFit.none,
                    //contain 全部显示，显示原比例，不充满
                    //cover 显示可能拉伸，可能裁剪，充满
                    //fit width，可能拉伸，可能裁剪，宽度充满
                    //fit height 可能拉伸，可能裁剪，高度充满
                    alignment: Alignment.center,
                    child: Container(
                      color: Colors.green,
                      child: Text(
                        'BoxFit.fill',
                        style: TextStyle(color:Colors.white),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: 80.0,
                  height: 80.0,
                  child: FittedBox(
                    fit: BoxFit.scaleDown,
                    //contain 全部显示，显示原比例，不充满
                    //cover 显示可能拉伸，可能裁剪，充满
                    //fit width，可能拉伸，可能裁剪，宽度充满
                    //fit height 可能拉伸，可能裁剪，高度充满
                    alignment: Alignment.center,
                    child: Container(
                      color: Colors.green,
                      child: Text(
                        'BoxFit.fill',
                        style: TextStyle(color:Colors.white),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )
      ),
    );
  }
}

